<template>
  <div class="container">
    <el-main class="main">
      <el-row>
        <!-- 左边三个 -->
        <el-col :span="6" style="padding: 0px 10px">
          <el-row>
            <el-col :span="24" class="one">
              <One />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="one">
              <Two />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="one">
              <Three />
            </el-col>
          </el-row>
        </el-col>
        <!-- 中间三个 -->
        <el-col :span="12">
          <el-row>
            <el-col :span="24" class="">
              <Four />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="four marginTop">
              <Five />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="one">
              <Six />
            </el-col>
          </el-row>
        </el-col>
        <!-- 右边的两个 -->
        <el-col :span="6" style="padding: 0px 10px">
          <el-row>
            <el-col :span="24" class="one">
              <Seven />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="one">
              <Eight />
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

  <script>
import One from "./components/one.vue";
import Two from "./components/two.vue";
import Three from "./components/three.vue";
import Four from "./components/four.vue";
import Five from "./components/five.vue";
import Six from "./components/six.vue";
import Seven from "./components/seven.vue";
import Eight from "./components/eight.vue";
export default {
  components: {
    One,
    Two,
    Three,
    Four,
    Five,
    Six,
    Seven,
    Eight,
  },
  data() {
    return {
      list: [],
      fontSize: 10,
    };
  },
  onload() {
    this.fontSize = this.getRem(1920, 1080, 100);
    window.addEventListener("resize", function () {
      this.fontSize = this.getRem(1920, 1080, 100);
    });
    console.log(this.fontSize);
  },
  watch: {
    fontSize(newSize, oldSize) {
      // 在 fontSize 属性发生变化时执行的操作
      console.log(`fontSize 从 ${oldSize} 变为 ${newSize}`);
      // 可以在这里添加其他逻辑代码
    },
  },
  mounted() {},
  methods: {
    getRem(pwidth, pheight, prem) {
      let fontSize;
      //获取html元素
      var html = document.getElementsByTagName("html")[0];
      //获取屏幕高度
      var oHeight = window.innerHeight;
      //获取屏幕宽度
      var oWidth = window.innerWidth > 1200 ? window.innerWidth : 1200;
      //计算宽高比
      let pd = pheight / pwidth;
      let tpd = oHeight / oWidth;
      //console.log(pd, tpd, tpd < pd)
      //如果屏幕宽高比小于图片宽高比，则设置html元素的字体大小为图片高度乘以rem值
      if (tpd < pd) {
        fontSize = (oHeight / pheight) * prem;
        //如果屏幕宽高比大于图片宽高比，则设置html元素的字体大小为图片宽度乘以rem值
      } else {
        fontSize = (oWidth / pwidth) * prem;
      }
      //设置html元素的字体大小
      html.style.fontSize = parseInt(fontSize) + "px";
      //返回html元素的字体大小
      return parseInt(fontSize);
    },
  },
};
</script>

<style lang="scss" scoped>
.marginTop {
  margin-top: 2vh;
}
.four {
  background-color: #328cff;
  border-radius: 20px;
}
.one {
  background-color: rgba(128, 128, 128, 0.2);
  // opacity: 0.5;

  margin-top: 10px;
  border-radius: 20px;
}
.container {
  background: url("../../assets/image/bei.png");
}
.main {
  width: 95%;
  // background-color: red;
  margin: 0px auto;
}
</style>